iT邦幫忙

2023 iThome 鐵人賽
0
自我挑戰組

用ChatGPT詠唱來完成工作與點亮前後端技能樹系列 第 51 篇

【Day51】ChatGPT幫我完成工作：直接詠唱來重構翻新！PHP 轉NestJS + Knex！

15th鐵人賽 chatgpt 重構 nestjs php
696 瀏覽

  • 分享至 

  • xImage
    •  

大家好，我是一宵三筵！
接下來幾篇是實戰篇！也就是實際運用於工作
會分享我平常是怎麼使用ChatGPT幫我完成工作的

那我個人在工作上，近期部門主要活動除了開發新的網站服務之外
還有一個重點就在於重構翻新舊有服務

我們原本的網頁技術是這樣的：
前端： Html + jQuery
後端： php 使用 PDO 連資料庫，資料庫有mysql與mssql兩套

翻新之後，前端使用React & Nx & NextJS
後端用NodeJS & NestJS
那會搭配swagger、class-validator、class-transformer與knex等套件工具進行

後端部分，剛好在ChatGPT推出的這一年開始做重構翻新
所以除了一開始的技術學習有使用ChatGPT之外，發現很多翻新工作都是重複性的
可以直接交給ChatGPT來完成，而自己只要稍微把程式碼順過就可以完成了！

而且ChatGPT除了幫你保留原本就有的註解之外，甚至可能再追加註解上去
所以這一篇要做的就是，讓ChatGPT把php的程式碼進行重構翻新！

使用的模型是免費的GPT-3.5！人人可用，好用好用

而且我們期望上，希望ChatGPT不單只是照句翻
還可以請ChatGPT使用更貼近NodeJS的思維去改寫
畢竟不同語言有不同的思維和語法、工具，原本舊的程式碼也不一定是寫得夠簡潔

範例中有關資料庫表格的欄位會適度的替換掉名稱，也不會涉及工作中的商業邏輯或是保密邏輯
我們本篇要靠「直接詠唱」的方式，進行兩個舊程式碼翻寫範例

一起看看ChatGPT可以把工作做得多好，GO GO!

設定自訂指示

也不確定ChatGPT到底能不能好好遵守，但為了後續不要花太多時間在講述前提
我們還是必須設定好自訂提示
先設定自我介紹：

我是一名全端工程師，後端使用nestJS (nodeJS)開發
會需要把php的程式碼使用NestJS重構翻新，擅長TypeScript
並在開發時使用ES6以上的語法，常用async/await
會使用knex來做資料庫連接
在DTO的定義上，會搭配@nestjs/swagger與class-validator套件

偏好回答方式：

請使用繁體中文回答，或是非程式碼的答案都翻成繁體中文，並在句子中的詞語上使用台灣用語、台灣慣用的方式回答。
當回應和javascript或是typescript 有關時，請優先使用typescript的語法回應。
需要將sql程式碼翻成knex時，請使用 Knex 的方法鏈式進行，並且非必要時不要使用.raw()

特別注意，如果是把程式碼轉換成其他指定語言，程式碼請回答完整，不要省略
並盡可能將程式碼做優化。

喔對了我自己體感上，把需要ChatGPT遵守的回答方式放在上面那格
不知道是權重的關係還是什麼原因，ChatGPT好像比較記得
所以我也很常把除了「指定繁體中文」、「程式碼回答完整」以外的回應指令
都放到上面的自我介紹欄位中
大家可以自己調整看看，看怎麼放ChatGPT才不會又忘記我們訂下的規則

創建專案

好的，這個步驟實際上我在工作的時候是自己處理的
但是都要請ChatGPT工作了，想看看他能不能做到足夠完善
之後要當一個薪水小偷，連創建專案都讓ChatGPT來，豈不是舒舒服服

我的內容是這樣的： （這邊放文字方便需要的人複製）

我接下來要把php的程式碼，使用NestJS重構翻新成RESTful API，並使用knex進行資料庫連線
現在請先幫我創建專案，並新增一個模組是用來進行knex連線的dbModule與service
該連線的service提供兩組資料庫連線實例，一個連線mysql，一個連線mssql
在service連線時，所有connection內的屬性使用環境變數的方式來讀取 .env檔中的內容
提供的程式碼中，請包含讀取.env的設定
以及逐步創建的指令

https://ithelp.ithome.com.tw/upload/images/20231104/20135750cfJu5EypZT.png

好的，我會協助你逐步創建專案，並新增一個模組用來進行Knex連線的dbModule以及相應的service。請跟著以下步驟進行：

  1. 創建新專案:

    在命令列中執行以下指令，創建一個新的NestJS專案：

    nest new project-name

  2. 新增dbModule:

    在專案中新增一個名為db的module，並在其中建立相關連線：

    nest generate module db

    這會在 src 目錄下創建一個 db 資料夾，裡面包括了 db.module.ts 檔案。

  3. 新增service:

    在db模組中新增一個service來處理資料庫連線，你可以執行以下指令：

    nest generate service db

    這會在 src/db 目錄下創建一個 db.service.ts 檔案。

  4. 設定環境變數:

    在你的專案根目錄下創建一個 .env 檔案，並在其中添加你的環境變數，例如：

    MYSQL_HOST=localhost
MYSQL_USER=root
MYSQL_PASSWORD=yourpassword
MSSQL_HOST=localhost
MSSQL_USER=sa
MSSQL_PASSWORD=yourpassword

    請將 yourpassword 替換為你的資料庫密碼。

  5. 讀取環境變數:

    在db.service.ts檔案中使用dotenv套件來讀取環境變數。首先，安裝 dotenv 套件：

    npm install dotenv

    在 db.service.ts 中引入套件並讀取環境變數：

    import * as dotenv from 'dotenv';
dotenv.config();

    然後你可以在程式碼中使用 process.env 來取得環境變數的值。

  6. 設定Knex連線:

    在 db.service.ts 中使用 Knex 來設定資料庫連線。請使用以下程式碼：

    import * as knex from 'knex';

const mysqlConnection = knex({
  client: 'mysql2',
  connection: {
    host: process.env.MYSQL_HOST,
    user: process.env.MYSQL_USER,
    password: process.env.MYSQL_PASSWORD,
    database: 'your_mysql_database', // 替換為你的MySQL資料庫名稱
  },
});

const mssqlConnection = knex({
  client: 'mssql',
  connection: {
    server: process.env.MSSQL_HOST,
    user: process.env.MSSQL_USER,
    password: process.env.MSSQL_PASSWORD,
    database: 'your_mssql_database', // 替換為你的MSSQL資料庫名稱
  },
});

export class DbService {
  getMysqlConnection() {
    return mysqlConnection;
  }

  getMssqlConnection() {
    return mssqlConnection;
  }
}

    請將 your_mysql_database 和 your_mssql_database 替換為你的MySQL和MSSQL資料庫名稱。

現在你已經成功創建了一個NestJS專案，並新增了一個模組(dbModule)，以及相應的service(dbService)，並且已經能夠連線到MySQL和MSSQL資料庫。如果有任何問題或需要進一步的幫助，請隨時告訴我。

喔，就是真的舒舒服服。
他可能忘了要我們安裝knex還有mysql2以及我有提到的mssql，自己來安裝一下

npm install knex mysql2 mssql --save

另外因為這個模組是未來要給其他模組引入使用，所以應該要export 出 dbService
但範例中沒有提到

import { Module } from '@nestjs/common';
import { DbService } from './db.service';

@Module({
  providers: [DbService],
  exports: [DbService],
})
export class DbModule {}

還要雞蛋裡挑骨頭的話
就是沒有要我們安裝nest 、執行完 nest new project-name沒有要我們cd進去資料夾
身為一個工程師，這一點步驟自己補上！

開始前的規則與前情提要

一開始的設定描述會比較繁瑣，讓後面的工作比較順利進行
先給ChatGPT前情提要，告知翻新的規則與寫風，請他好好地遵守，寫出好用的程式碼

接下來的對話中
當我說以下是php程式碼時，請給予NestJS 的程式碼
並且使用適當的模組名稱分模組與設定路由名稱
若有需要使用資料庫連線，knex實例請沿用上方已創建的dbModule，從注入的dbService中取得，同時需附上被注入的module.ts程式碼

再來，從程式碼上判斷knex是使用mysql連線實例還是mssql連線實例
knex請用方法鏈式進行

最後，所有的程式碼請不要省略，提供完整

https://ithelp.ithome.com.tw/upload/images/20231104/201357508cBmR3zD67.png

範例一：簡易添加Log＆寫入檔案的改寫

以下這邊是我們的舊程式碼
將指定的訊息存入資料庫表格之外
是錯誤訊息的時候，會另外的寫一個txt檔作紀錄

/** serviceLog 登記在mysql的service_log 與紀錄debug_log.txt文件
 * @param string $taskId  任務編號
 * @param string $dep  部門
 * @param string $userId  使用者帳號id
 * @param string $text  紀錄的文字
 * @param string $type  紀錄等級類型 'TRACE','DEBUG','INFO','WARN','ERROR','FATAL'
 * @param number $level 紀錄等級 0~5
 * @return void
 */
function serviceLog($taskId,$dep,$userId,$text,$type,$level) {
    // 去檔案登記 => 當訊息是錯誤訊息的時候
    if ($level >= 4) {
        $nowTime = date("Y-m-d H:i:s");
        $logText = "$nowTime : [$type] $text 。 taskId = $taskId, dep = $dep , userId = $userId \n";
        $logDir = '../log/';
        if (is_dir($logDir) == false) { mkdir($logDir);}
        if (($fp = fopen("$logDir/debug_log.txt", 'a+')) !== false) {
            fputs($fp, $logText);
            fclose($fp);
        }
    }

    // 去MySQL 登記
    $autoExamLink = _MySQL_connect();
    $logQuery = "INSERT INTO service_log (taskId,logText,logType,logLevel,dep,userId)
        values ('$taskId','$text','$type','$level','$dep','$userId')";
    $autoExamLink -> query($logQuery);
    $autoExamLink = null;
}

https://ithelp.ithome.com.tw/upload/images/20231104/20135750UkTRvoQjw2.png
（以下內容省略）

好的，以下是將你提供的PHP程式碼轉換成NestJS的程式碼：

首先，我們會在NestJS專案中創建一個名為 logModule 的模組，並在其中建立一個 logService 來處理日誌相關的操作。

  1. 創建 logModule:
nest generate module log

這會在 src 目錄下創建一個 log 資料夾，裡面包括了 log.module.ts 檔案。

  1. 創建 logService:
nest generate service log

這會在 src/log 目錄下創建一個 log.service.ts 檔案。

接下來，我們將轉換你提供的PHP程式碼為NestJS的程式碼。

// 在 log.service.ts 中引入相關套件
import { Injectable } from '@nestjs/common';
import { DbService } from '../db/db.service'; // 引入資料庫連線的service

@Injectable()
export class LogService {
  constructor(private readonly dbService: DbService) {}

  async serviceLog(taskId: string, dep: string, userId: string, text: string, type: string, level: number): Promise<void> {
    // 去檔案登記 => 當訊息是錯誤訊息的時候
    if (level >= 4) {
      const nowTime = new Date().toISOString();
      const logText = `${nowTime} : [${type}] ${text}。 taskId = ${taskId}, dep = ${dep} , userId = ${userId} \n`;
      const logDir = '../log/';
      if (!fs.existsSync(logDir)) {
        fs.mkdirSync(logDir);
      }
      fs.appendFileSync(`${logDir}/debug_log.txt`, logText);
    }

    // 去MySQL 登記
    const mysqlConnection = this.dbService.getMysqlConnection(); // 取得MySQL連線實例

    await mysqlConnection('service_log').insert({
      taskId,
      logText: text,
      logType: type,
      logLevel: level,
      dep,
      userId,
    });
  }
}

在上述程式碼中，我們使用了 fs 套件來處理檔案相關操作，請確保你已經在專案中引入了 fs。

請注意，我們在 serviceLog 方法中使用了 async/await，這是因為 Knex 使用 Promise 來處理異步操作。

接著，讓我們在 log.module.ts 中設定相關的路由名稱：

import { Module } from '@nestjs/common';
import { LogService } from './log.service';

@Module({
  providers: [LogService],
  exports: [LogService],
})
export class LogModule {}

最後，確保你已經在你的 app.module.ts 中引入了這兩個模組：

import { Module } from '@nestjs/common';
import { AppController } from './app.controller';
import { AppService } from './app.service';
import { LogModule } from './log/log.module'; // 引入logModule
import { DbModule } from './db/db.module'; // 引入dbModule

@Module({
  imports: [LogModule, DbModule], // 加入模組
  controllers: [AppController],
  providers: [AppService],
})
export class AppModule {}

這樣就完成了將你提供的PHP程式碼轉換成NestJS程式碼的過程，並且使用了 logModule 和 dbModule 來進行模組化開發。如果還有其他需求或疑問，請隨時告訴我。

我所要求的內容，ChatGPT幾乎都有達成

  1. ✅ 使用TypeScript
  2. ✅ 自動根據功能分模組，創建模組與service並給予適當命名
  3. ✅ knex實例請沿用上方已創建的dbModule，並用knex語法進行query
  4. ✅ 根據我的程式碼，判斷連接的資料庫是mysql
  5. ✅ 使用awiat處理kenx異步操作
  6. ✅ 完整、無遺漏的把原本的邏輯改用NodeJS語法撰寫

ChatGPT給的程式碼還是有一點點小缺失，像是：

  1. 使用了fs但沒有import引入
  2. 使用了 Sync 系列的檔案操作，而不是搭配await處理
  3. LogModule 中沒有import DbModule

這類的小缺失，通常我會手動直接改正
這就是我說的「自己順過一次程式碼」，幾乎不需要太多改動就可以完成

哦當然，他還沒有給我們Controller的程式碼
所以，以上的內容我就一起要一下

https://ithelp.ithome.com.tw/upload/images/20231104/20135750JlLMgSadwr.png

非常抱歉疏漏了 fs 的引入以及同步語法的問題。感謝你的指正，以下是已經修正過的程式碼：

首先，讓我們修正 log.service.ts：

import { Injectable } from '@nestjs/common';
import { promises as fs } from 'fs'; // 引入 fs 的 promises 版本
import { DbService } from '../db/db.service';

@Injectable()
export class LogService {
  constructor(private readonly dbService: DbService) {}

  async serviceLog(taskId: string, dep: string, userId: string, text: string, type: string, level: number): Promise<void> {
    if (level >= 4) {
      const nowTime = new Date().toISOString();
      const logText = `${nowTime} : [${type}] ${text}。 taskId = ${taskId}, dep = ${dep} , userId = ${userId} \n`;
      const logDir = '../log/';
      try {
        await fs.mkdir(logDir, { recursive: true }); // 使用 await 的寫法
        await fs.appendFile(`${logDir}/debug_log.txt`, logText); // 使用 await 的寫法
      } catch (error) {
        console.error(error);
      }
    }

    const mysqlConnection = this.dbService.getMysqlConnection();
    await mysqlConnection('service_log').insert({
      taskId,
      logText: text,
      logType: type,
      logLevel: level,
      dep,
      userId,
    });
  }
}

接下來，讓我們修正 log.module.ts：

import { Module } from '@nestjs/common';
import { LogService } from './log.service';
import { DbModule } from '../db/db.module'; // 引入 DbModule

@Module({
  imports: [DbModule], // 將 DbModule 注入
  providers: [LogService],
  exports: [LogService],
})
export class LogModule {}

最後，新增一個 log.controller.ts 並建立呼叫 serviceLog 的路由：

import { Controller, Post, Body } from '@nestjs/common';
import { LogService } from './log.service';

@Controller('log')
export class LogController {
  constructor(private readonly logService: LogService) {}

  @Post('serviceLog')
  async serviceLog(
    @Body('taskId') taskId: string,
    @Body('dep') dep: string,
    @Body('userId') userId: string,
    @Body('text') text: string,
    @Body('type') type: string,
    @Body('level') level: number,
  ) {
    return await this.logService.serviceLog(taskId, dep, userId, text, type, level);
  }
}

在這個範例中，我們新增了一個 LogController 並在其中建立了一個 POST 路由，用來呼叫 serviceLog 方法。

請確保你已經在 log.module.ts 中將 LogController 加入 providers 以及 exports：

import { Module } from '@nestjs/common';
import { LogService } from './log.service';
import { LogController } from './log.controller';
import { DbModule } from '../db/db.module';

@Module({
  imports: [DbModule],
  controllers: [LogController], // 將 LogController 加入這裡
  providers: [LogService],
  exports: [LogService],
})
export class LogModule {}

這樣就完成了你的需求，我們已經修正了程式碼，並將 DbModule 注入到 LogModule 中。如果還有其他問題或需求，請隨時告訴我。

哇，perfect。
雖然路由命名不夠RESTful，但我沒有跟他強調指定，所以沒關係

再來一個部分，就是那個拉哩拉渣的參數
沒有使用DTO、沒有使用class-validator，然後還沒加上swagger
不過上面的指令，也沒有明確下令要做這些，所以他沒有做是正常的

補個DTO、class-validator和swagger！

https://ithelp.ithome.com.tw/upload/images/20231104/20135750TFmeJMCFpD.png

好的，我會協助你將參數包成 DTO，並使用 class-validator 和 swagger 進行驗證和文件生成。

首先，讓我們新增一個 DTO 來包裝你提供的參數：

  1. 創建一個 log.dto.ts 檔案：
import { IsString, IsEnum, IsInt } from 'class-validator';
import { ApiProperty } from '@nestjs/swagger';
import { LogLevel } from './log.enum'; // 這裡是你的 LogLevel 的 enum 定義

export class LogDto {
  @ApiProperty({
    description: '任務編號',
  })
  @IsString()
  taskId: string;

  @ApiProperty({
    description: '部門',
  })
  @IsString()
  dep: string;

  @ApiProperty({
    description: '使用者帳號id',
  })
  @IsString()
  userId: string;

  @ApiProperty({
    description: '紀錄的文字',
  })
  @IsString()
  text: string;

  @ApiProperty({
    description: '紀錄等級類型',
    enum: LogLevel,
  })
  @IsEnum(LogLevel)
  type: LogLevel;

  @ApiProperty({
    description: '紀錄等級',
  })
  @IsInt()
  level: number;
}
  1. 定義 LogLevel enum，可以在 log.enum.ts 中新增：
export enum LogLevel {
  TRACE = 'TRACE',
  DEBUG = 'DEBUG',
  INFO = 'INFO',
  WARN = 'WARN',
  ERROR = 'ERROR',
  FATAL = 'FATAL',
}

接下來，我們要在 log.controller.ts 中使用這個 DTO：

// 在 log.controller.ts 中引入 LogDto
import { LogDto } from './log.dto';

// ...

@Controller('log')
export class LogController {
  constructor(private readonly logService: LogService) {}

  @Post('serviceLog')
  async serviceLog(@Body() logDto: LogDto) {
    const { taskId, dep, userId, text, type, level } = logDto;
    return await this.logService.serviceLog(taskId, dep, userId, text, type, level);
  }
}

最後，讓我們設定 Swagger：

在你的 main.ts 檔案中，請加入以下程式碼：

import { NestFactory } from '@nestjs/core';
import { SwaggerModule, DocumentBuilder } from '@nestjs/swagger';
import { AppModule } from './app.module';

async function bootstrap() {
  const app = await NestFactory.create(AppModule);

  const config = new DocumentBuilder()
    .setTitle('Your API Title')
    .setDescription('Your API Description')
    .setVersion('1.0')
    .build();
  const document = SwaggerModule.createDocument(app, config);
  SwaggerModule.setup('api', app, document);

  await app.listen(3000);
}
bootstrap();

請替換其中的 Your API Title 和 Your API Description 為你的專案相應的標題和描述。

這樣就完成了將參數包成 DTO，並使用 class-validator 和 swagger 進行驗證和文件生成的操作。如果還有其他問題或需求，請隨時告訴我。

一樣小問題，沒有給我們安裝swagger和 class-validator 的程式碼

主因是我一口氣和他要求很多東西
如果真的把這些要求都細分，逐步和他要的話，他可以給得很好

不過我們現在是用詠唱來要他一口氣把東西做好，就會變成這樣

只好自己來加一下 （如果實際上需要的話也可以跟ChatGPT反應拉，但我很懶）

npm install @nestjs/swagger class-validator --save

至於解構要不要在controller解構丟進service就看人了
我的習慣是丟進service再解構，這部分也是我會手動調整的部分

到這邊為止，整理一下什麼是ChatGPT提供的，什麼是手動調整的

  • ChatGPT提供的:
  1. 建立初始專案
  2. module＆service＆controller 建置
  3. knex設置、.env的設置、dbModule的設置
  4. 產生原本程式的邏輯程式，使用nodeJS語法改寫
  5. 使用knex寫原本的SQL語句
  6. 改使用await語法撰寫
  7. DTO、swagger＆class-validator裝飾器、相關enum
  8. swagger在main.ts的設置
  • 手動更正的:
  1. 必要時在終端機執行cd進入專案資料夾
  2. 安裝必要套件：nest、knex、mysql2、mssql、swagger、class-validator
  3. module沒有export、注入時沒有import的部分
  4. 調整路由名稱為更加RESTful
  5. 參數物件的解構位置、方式等
  6. 必要時修正DTO內容 （可能舊有的程式碼沒有寫清楚寫完整）

這樣看下來，其實最繁重的內容ChatGPT都處理掉了
也有很多東西是可以自己做的，比花時間詠唱還快
像是下一些nest generate 相關的指令

不過前面的詠唱花了越多時間，後面的工作就越輕鬆
因為藉由前面的例子，ChatGPT已經跟你充分建立好「默契」

我們直接來第二個範例看看是不是能順很多

範例二：較複雜＆原程式碼邏輯混亂的改寫

下面這邊是一個比較複雜的程式碼，主要是針對檔案的處理狀態進行管理與取得

API這邊只負責確認檔案是否處理完成、並想要取得相關資訊列表，去計算部分資訊
如果還沒完成，就會把資訊塞入資料庫裡，請求其他主機去處理這個檔案

（已替換部分變數字眼，遮蔽工作相關的敏感邏輯，內容有興趣看就看，沒興趣就跳過）

/** getFileData  取得檔案資訊 or 塞入檔案資訊進表格，請主機處理該檔案
 * 包含觸發失敗後自動重新執行與確認失敗次數，如果失敗太多次就放棄
 * @param string $fileID 該檔案辨識UID 
 * @param string $fileUrl 要處理的檔案位置
 * 
 * @return {
 *  isDataReady: boolean, // 任務是否完成（成功or失敗），或是主機處理中
 *  isQueryLimit: boolean, // 是否超過執行的錯誤失敗極限
 *  fileInfo: Array<object> // 結果列表
 *  errorMessage: string  // 錯誤訊息
 * }
 */
function getFileData($fileID,$fileUrl) {
    $isDataReady = false;  
    $isQueryLimit = false; 
    $errorMessage  = '';
    $fileInfo= array();

    $link = _MySQL_connect();
    // 找沒有失敗的相同fileID的記錄  (statusId=4 為失敗)
    $query = "
	  SELECT taskId,gettime,statusId,isFirst,fileType,
          TIMESTAMPDIFF(hour, gettime, now()) as hour ,
          TIMESTAMPDIFF(minute, gettime, now()) as minute
	  FROM file_record
      WHERE switch = 1 and fileID= '$fileID' 
      ORDER BY taskId desc ";
    $recordResult =  $link -> query($query);
    $dataRecord =  $recordResult-> fetch(PDO:: FETCH_ASSOC);
    $taskId = $dataRecord['taskId']; 

    if ($dataRecord['statusId']!=3 && 
        $dataRecord['statusId']!=4 && 
        $taskId !='' && $dataRecord['minute'] > 10 ) 
    {
        // statusId 非4的狀況持續了十分鐘以上 （處理逾時）
        // 把原本的取消掉 再接後續的新增任務
        $cancelQuery = "UPDATE file_record SET switch =0 where taskId = '$taskId'";
        $link -> query($cancelQuery);
        $taskId = ''; // 清空，就會接到下方的新增任務
    }

    // 確認到底有幾次失敗的
    $limitQueryTimes = 2; // 最大嘗試次數為兩次
    $errorCheckQuery = "SELECT count(statusId) as queryTimes
        FROM file_record
        WHERE switch = 1 and statusId=4 and fileID= '$fileID' 
	    GROUP BY statusId";
    $errorResult = $link -> query($errorCheckQuery);
    $errorRow = $errorResult-> fetch(PDO:: FETCH_ASSOC);

    if ($errorRow['queryTimes'] > $limitQueryTimes && $errorRow['queryTimes'] != '') {
        //請求失敗的次數>2
        $errorMessage  = '執行失敗 超過兩次失敗';
        $isQueryLimit = true;
        // 把statusId = 4 的 switch =0
        $failQuery = "UPDATE file_ecord 
          SET switch =0 
          WHERE switch = 1 and statusId=4 and fileId= '$fileId'";
        $link -> query($failQuery);
    } else if ( $taskId== ''  ||   $dataRecord['statusId'] ==4  ) { 
        // 沒有資料，或是產生資料失敗，而且請求的任務次數<=2 次
        //去新增掃框任務到file_record 內
        $statusId = 1
        $viewKey = getUniqid();
        $insertQuery = "INSERT INTO file_ecord
        (fileId,gettime,viewkey,fileUrl,statusId)
        values('$fileId',now(),'$viewKey','$fileUrl',$statusId)";
        $link -> query($insertQuery);
    }

    if ($taskId !='' && $dataRecord['statusId'] ==3 ) {
      $isDataReady = true;
      // 有資料 & 成功 => 去細表拿資料
      $getInfoQuery = "SELECT id,size,x,y,width_px,height_px,rate
          FROM file_info
          WHERE switch =1 and taskId = '$taskId'";
      $getInfoResult = $link -> query($getInfoQuery);
      // 計算浮點數準備
      $magicNumber = 2.834645;
      while ($row = $getInfoResult-> fetch(PDO::FETCH_ASSOC)) {            
        if ($row['rate']!='' && $row['rate'] != 0) 
          // 計算浮點數資訊
          $floatWidthInMm = round(($row['width_px']/$magicNumber) / $row['rate'],2);
          $floatHeightInMm = round(($row['height_px']/$magicNumber) / $row['rate'], 2);
          $floatSizeInMm = "$floatWidthInMm x $floatHeightInMm";
        } else
          $floatSizeInMm = $row['size']; // 如果沒有辦法算小數點的話就用原本尺寸
        }
        array_push($fileInfo,array(
          'id' => $row['id'],
          'cropBox' => array(
             'width' => $row['width_px'],
             'height' => $row['height_px']
             'x' => $row['x'],
             'y' => $row['y']
           ),
           'sizeInMm' => $row['size'],
           'floatSizeInMm' => $floatSizeInMm
          )
        );
      }
    }
    $response = array(
      'isDataReady' => $isDataReady,
      'isQueryLimit' => $isQueryLimit,
      'fileInfo' => $fileInfo,
      'errorMessage' => $errorMessage
    );
    return ($response);   
}

https://ithelp.ithome.com.tw/upload/images/20231104/20135750dGRiT9hwFG.png

好的，我會協助你將提供的PHP程式碼轉換成NestJS的程式碼，包括創建 fileData 模組以及相應的 service 程式碼。

首先，讓我們創建 fileDataModule：

  1. 創建 fileData Module:
nest generate module fileData

這會在 src 目錄下創建一個 file-data 資料夾，裡面包括了 file-data.module.ts 檔案。

接著，我們會創建相關的 DTO、Enum、Service 以及 Controller。

  1. 創建 fileData DTO:

在 file-data 資料夾下創建一個名為 file-data.dto.ts 的檔案，並加入以下程式碼：

import { IsString } from 'class-validator';
import { ApiProperty } from '@nestjs/swagger';

export class FileDataDto {
  @ApiProperty({
    description: '該檔案辨識UID',
  })
  @IsString()
  fileID: string;

  @ApiProperty({
    description: '要處理的檔案位置',
  })
  @IsString()
  fileUrl: string;
}
  1. 定義 statusId Enum:

在 file-data 資料夾下創建一個名為 status.enum.ts 的檔案，並加入以下程式碼：

export enum StatusId {
  SUCCESS = 3,
  FAILURE = 4,
}
  1. 創建 fileDataService:
nest generate service fileData

這會在 src/file-data 目錄下創建一個 file-data.service.ts 檔案。

接下來，讓我們將提供的PHP程式碼轉換成NestJS的程式碼：

// 在 file-data.service.ts 中引入相關套件
import { Injectable } from '@nestjs/common';
import { StatusId } from './status.enum'; // 引入 statusId 的 enum 定義

@Injectable()
export class FileDataService {
  async getFileData(fileID: string, fileUrl: string): Promise<any> {
    let isDataReady = false;
    let isQueryLimit = false;
    let errorMessage = '';
    const fileInfo = [];

    const link = await this.dbService.getMysqlConnection(); // 取得MySQL連線實例

    // 其餘部分的程式碼請將提供的PHP程式碼進行對應的轉換
    // ...
    // (將提供的程式碼進行轉換)

    const response = {
      isDataReady,
      isQueryLimit,
      fileInfo,
      errorMessage,
    };

    return response;
  }
}

請注意，上述程式碼中的部分程式碼需要根據提供的 PHP 程式碼進行相應的轉換。

最後，我們可以在 file-data.controller.ts 中建立相應的路由：

// 在 file-data.controller.ts 中引入相關套件和 DTO
import { Controller, Post, Body } from '@nestjs/common';
import { ApiTags } from '@nestjs/swagger';
import { FileDataService } from './file-data.service';
import { FileDataDto } from './file-data.dto';

@ApiTags('fileData')
@Controller('fileData')
export class FileDataController {
  constructor(private readonly fileDataService: FileDataService) {}

  @Post()
  async getFileData(@Body() fileDataDto: FileDataDto) {
    const { fileID, fileUrl } = fileDataDto;
    return await this.fileDataService.getFileData(fileID, fileUrl);
  }
}

這樣就完成了將提供的 PHP 程式碼轉換成 NestJS 程式碼的過程，並且包括了創建 fileDataModule 以及相應的 service 程式碼。如果還有其他問題或需求，請隨時告訴我。

最核心的FileDataService 被他省略掉了
但沒關係，看在他又幫我們處理好module的創建，以及Controller與DTO 都寫好了的份上
我們就姑且原諒他。別忘了我們現在是免費仔，用的是GPT-3.5

回答的內容長度似乎有一個上限，太多他就會寫省略了
省略沒關係，我們就分問題問！
https://ithelp.ithome.com.tw/upload/images/20231104/20135750I5OEdRwfxR.png

了解，我將提供完整的 FileDataService 並確保使用 knex 進行資料庫查詢，同時優化程式碼。

首先，請確保在 file-data.module.ts 中注入 DbModule：

import { Module } from '@nestjs/common';
import { FileDataService } from './file-data.service';
import { DbModule } from '../db/db.module'; // 引入 DbModule

@Module({
  imports: [DbModule], // 將 DbModule 注入
  providers: [FileDataService],
})
export class FileDataModule {}

接下來，我們來優化並提供完整的 FileDataService：

import { Injectable } from '@nestjs/common';
import { DbService } from '../db/db.service'; // 引入 DbService
import { StatusId } from './status.enum';

@Injectable()
export class FileDataService {
  constructor(private readonly dbService: DbService) {}

  async getFileData(fileID: string, fileUrl: string): Promise<any> {
    let isDataReady = false;
    let isQueryLimit = false;
    let errorMessage = '';
    const fileInfo = [];

    const link = await this.dbService.getMysqlConnection();

    try {
      const recordResult = await link('file_record')
        .select(
          'taskId',
          'gettime',
          'statusId',
          'isFirst',
          'fileType',
          link.raw('TIMESTAMPDIFF(hour, gettime, now()) as hour'),
          link.raw('TIMESTAMPDIFF(minute, gettime, now()) as minute')
        )
        .where({ switch: 1, fileID })
        .orderBy('taskId', 'desc')
        .first();

      let taskId = recordResult ? recordResult.taskId : '';

      if (
        recordResult &&
        recordResult.statusId !== StatusId.SUCCESS &&
        recordResult.statusId !== StatusId.FAILURE &&
        taskId !== '' &&
        recordResult.minute > 10
      ) {
        await link('file_record').where({ taskId }).update({ switch: 0 });
        taskId = '';
      }

      const errorQueryTimes = await link('file_record')
        .count('statusId as queryTimes')
        .where({ switch: 1, statusId: StatusId.FAILURE, fileID })
        .groupBy('statusId')
        .first();

      if (errorQueryTimes && errorQueryTimes.queryTimes > 2) {
        errorMessage = '執行失敗 超過兩次失敗';
        isQueryLimit = true;
        await link('file_record')
          .where({ switch: 1, statusId: StatusId.FAILURE, fileID })
          .update({ switch: 0 });
      } else if (!taskId || 
                (recordResult && recordResult.statusId === StatusId.FAILURE)) {
        const statusId = 1;
        const viewKey = this.getUniqid();
        await link('file_record').insert({
          fileID,
          gettime: link.raw('now()'),
          viewkey: viewKey,
          fileUrl,
          statusId,
        });
      }

      if (taskId && recordResult.statusId === StatusId.SUCCESS) {
        isDataReady = true;
        const getInfoResult = await link('file_info')
          .select('id', 'size', 'x', 'y', 'width_px', 'height_px', 'rate')
          .where({ switch: 1, taskId });

        const magicNumber = 2.834645;

        for (const row of getInfoResult) {
          let floatSizeInMm;
          if (row.rate && row.rate !== 0) {
            const floatWidthInMm = Math.round((row.width_px / magicNumber / row.rate) * 100) / 100;
            const floatHeightInMm = Math.round((row.height_px / magicNumber / row.rate) * 100) / 100;
            floatSizeInMm = `${floatWidthInMm} x ${floatHeightInMm}`;
          } else {
            floatSizeInMm = row.size;
          }

          fileInfo.push({
            id: row.id,
            cropBox: {
              width: row.width_px,
              height: row.height_px,
              x: row.x,
              y: row.y,
            },
            sizeInMm: row.size,
            floatSizeInMm,
          });
        }
      }
    } catch (error) {
      errorMessage = '發生錯誤';
      console.error(error);
    }

    const response = {
      isDataReady,
      isQueryLimit,
      fileInfo,
      errorMessage,
    };

    return response;
  }

  private getUniqid(): string {
    // 實作你的 getUniqid 方法
    // ...
  }
}

這樣就完成了 FileDataService 的優化以及對應的 knex 資料庫操作。請確保在 file-data.module.ts 中正確地注入了 DbModule。如果還有其他問題或需求，請隨時告訴我。

FileDataModule引入了DbModule，就沒有了Controller ，只好自己手動補上

然後現在他給我們的程式碼，很多還是照句翻的
沒有給getIUniqid的方法之外
還有很多不必要的迴圈或 if / else ，語法習慣上並不是nodeJS的習慣
轉換後也有一些型別上的問題
https://ithelp.ithome.com.tw/upload/images/20231104/20135750UwOPOFVajW.png

另外，舊有的API並沒有遵照規範，遇到錯誤時仍然回傳HTTP status 200
只用自定義欄位的方式去讓前端判斷是否出錯
我們就一口氣請ChatGPT來做優化

https://ithelp.ithome.com.tw/upload/images/20231104/20135750cs6a4l5PLh.png

好的，我將優化程式碼以符合 Node.js 撰寫習慣，並解決相應的錯誤。同時，我會提供 getUniqid 方法的實作。

首先，讓我們優化程式碼：

import { Injectable, NotFoundException } from '@nestjs/common';
import { DbService } from '../db/db.service';
import { StatusId } from './status.enum';

interface CropBox {
  width: number;
  height: number;
  x: number;
  y: number;
}

interface FileInfo {
  id: string;
  cropBox: CropBox;
  sizeInMm: string;
  floatSizeInMm: string;
}

interface FileDataResponse {
  isDataReady: boolean;
  fileInfo: FileInfo[];
}

@Injectable()
export class FileDataService {
  constructor(private readonly dbService: DbService) {}

  async getFileData(fileID: string, fileUrl: string): Promise<FileDataResponse> {
    const link = await this.dbService.getMysqlConnection();

    try {
      const recordResult = await link('file_record')
        .select(
          'taskId',
          'gettime',
          'statusId',
          'isFirst',
          'fileType',
          link.raw('TIMESTAMPDIFF(hour, gettime, now()) as hour'),
          link.raw('TIMESTAMPDIFF(minute, gettime, now()) as minute')
        )
        .where({ switch: 1, fileID })
        .orderBy('taskId', 'desc')
        .first();

      let taskId = recordResult ? recordResult.taskId : '';

      if (
        recordResult &&
        (recordResult.statusId !== StatusId.SUCCESS || 
         recordResult.statusId !== StatusId.FAILURE) &&
        taskId !== '' &&
        recordResult.minute > 10
      ) {
        await link('file_record').where({ taskId }).update({ switch: 0 });
        taskId = '';
      }

      const errorQueryTimes = await link('file_record')
        .count('statusId as queryTimes')
        .where({ switch: 1, statusId: StatusId.FAILURE, fileID })
        .groupBy('statusId')
        .first();

      if (errorQueryTimes && +errorQueryTimes.queryTimes > 2) {
        throw new NotFoundException('執行失敗 超過兩次失敗');
      } else if (!taskId || 
                (recordResult && recordResult.statusId === StatusId.FAILURE)) {
        const statusId = 1;
        const viewKey = this.getUniqid();
        await link('file_record').insert({
          fileID,
          gettime: link.raw('now()'),
          viewkey: viewKey,
          fileUrl,
          statusId,
        });
      }

      if (taskId && recordResult.statusId === StatusId.SUCCESS) {
        const getInfoResult = await link('file_info')
          .select('id', 'size', 'x', 'y', 'width_px', 'height_px', 'rate')
          .where({ switch: 1, taskId });

        const magicNumber = 2.834645;

        const fileInfo: FileInfo[] = getInfoResult.map((row) => {
          let floatSizeInMm;
          if (row.rate && row.rate !== 0) {
            const floatWidthInMm = Math.round((row.width_px / magicNumber / row.rate) * 100) / 100;
            const floatHeightInMm = Math.round((row.height_px / magicNumber / row.rate) * 100) / 100;
            floatSizeInMm = `${floatWidthInMm} x ${floatHeightInMm}`;
          } else {
            floatSizeInMm = row.size;
          }

          return {
            id: row.id,
            cropBox: {
              width: row.width_px,
              height: row.height_px,
              x: row.x,
              y: row.y,
            },
            sizeInMm: row.size,
            floatSizeInMm,
          };
        });

        return { isDataReady: true, fileInfo };
      } else {
        return { isDataReady: false, fileInfo: [] };
      }
    } catch (error) {
      throw new NotFoundException('發生錯誤');
    }
  }

  private getUniqid(): string {
    return (
      Math.random().toString(36).substring(2, 15) +
      Math.random().toString(36).substring(2, 15)
    ).toUpperCase();
  }
}

這次的優化主要包括以下部分：

  1. 修正了可能引起錯誤的條件判斷式。
  2. 用 NotFoundException 來代替返回錯誤訊息，以符合 NestJS 的風格。
  3. 創建了相應的介面 CropBox、FileInfo 以及 FileDataResponse，以提高程式碼的可讀性。

請確保在你的程式碼中正確引用這些介面。

如果還有其他問題或需求，請隨時告訴我。

我分別説說我覺得滿意和不滿意的地方

滿意的部分：

1. 迴圈的語法改變

從一開始php的 for (i=0; < ...) 變成 for (const row of getInfoResult)
再變成使用 .map()
最終就是要將某個陣列資料，針對裡面的每個物件變成一個新的物件
在JS的習慣中，會使用 .map() 去處理

2. 針對有限的case，主動追加Enum

export enum StatusId {
  SUCCESS = 3,
  FAILURE = 4,
}

這個enum沒有出現在原本的程式中
但ChatGPT自動判斷語意，幫我們增加了enum更利於閱讀與維護

3. 減少回傳值的 let 變數，使用 const

原本的程式的回傳值，是一個會跟著程式進行不斷變動的變數
但轉成NodeJS語法後，盡可能地使用 const
並在結果不會更變的時候直接return 回傳，讓回傳結果明確、好追蹤理解
typescript if (taskId && recordResult.statusId === StatusId.SUCCESS) { // 略 const fileInfo: FileInfo[] = getInfoResult.map((row) => { // 略 }); return { isDataReady: true, fileInfo }; } else { return { isDataReady: false, fileInfo: [] }; }

不滿意的部分：

1. 仍然有不必要的 else if

https://ithelp.ithome.com.tw/upload/images/20231104/20135750leT3s39Q89.png
以上面的例子來說，若是進了throw Error 的部分
整個程式碼就不會跑到else if 的區塊，沒有必要跟前面的if 綁在一起

2. 原程式中的邏輯就很亂，優化後沒有改變很亂的邏輯

原本程式裡面那些判斷taskId的邏輯很混亂，ChatGPT沒有幫我們直接把邏輯重新梳理
有些時候看起來還是逐句翻寫，不好懂的地方仍然不好懂

3. TypeScript用得不夠，部分型別沒有明確標示

針對 let floatSizeInMm; 這個語句，後半很明顯只會是一個字串
但在定義這個變數的時候，ChatGPT沒有幫我們標註他的type

  1. 拋出例外HTTP Status
    我不太確定執行失敗，超過兩次判定失敗是算404嗎…?
    整個程序包起來，發生問題的try catch拋出仍然是404 …? 不是500...?

統整＆結語

本次的對話紀錄在這裡：
https://chat.openai.com/share/3614e6fd-d91c-4d00-88b5-f8e9377a1fae

這一篇基本上示範的是，從頭到尾都想要靠ChatGPT生成的成果
也就是讓自己處理的事情降到最低，幾乎靠詠唱

如果是對於NestJS夠熟練的人，可能很多語法或是改正可以自己處理
就像我向ChatGPT去做一些很明確地指正的時候
少某些套件引入也好，模組之間的import或export也好

自己手動更正的時間和精力耗費，比指揮ChatGPT還要少多了

但整體的邏輯翻寫，單純的逐句翻ChatGPT是完全沒問題的
建置環境、處理設定、自動撰寫DTO也是輕輕鬆鬆

請他以貼近NodeJS的邏輯與方式改寫，我個人覺得要稍微碰碰運氣
但大致上都表現得不錯！

至於原本邏輯就很迷、但是能動的那種程式碼
想要ChatGPT直接幫你梳理乾淨，大概是要骰骰子吧或擲筊求聖筊吧

所以呢，回到這個系列第一篇Day1所說的
我認為ChatGPT現階段要用來寫程式，主要是「幫助工程師的工具」

本身具有基本底子與知識的工程師，就能很輕易讓ChatGPT去生成那些枯燥重複的程式碼
自己只要負責指揮，然後拼裝、補足那些ChatGPT做得不夠完善的部分

以上！就是本篇直接把需要重構的內容直接丟給ChatGPT的示範！

下一篇！要用更片段、以組合的方式來詠唱
也就是所有的內容都是切成小任務，更貼近我平時用來工作的方式
每個問題可能都是獨立、且只問最枯燥、重複性高的問題
但對工作進展是很有幫助的

我是使用ChatGPT詠唱來輔助工作的前端工程師一宵三筵，我們一樣也許明天見！


上一篇
【Day50】ChatGPT請教教我：NestJS！（九）- Knex！transaction！migration！
下一篇
【Day52】ChatGPT幫我完成工作：分散式詠唱來寫NodeJS & JavaScript！
系列文
用ChatGPT詠唱來完成工作與點亮前後端技能樹 共 56 篇
  1. 52
    【Day52】ChatGPT幫我完成工作：分散式詠唱來寫NodeJS & JavaScript！
  2. 53
    【Day53】ChatGPT幫我完成工作：寫Jest單元測試！NestJS & Knex & Jest！
  3. 54
    【Day54】ChatGPT幫我完成工作：不會python也能用python爬蟲做出IT邦幫忙自動發文神器
  4. 55
    【Day55】用ChatGPT詠唱來完成工作與點亮前後端技能樹：完賽感言＆結語
  5. 56
    【出版】出成實體書了！《用 ChatGPT 詠唱來點亮 React ＆ 前端技能樹》！
完整目錄
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言
iThome鐵人賽
參賽組數
1064 組
團體組數
40 組
累計文章數
22053 篇
完賽人數
594 人
iT+看影片追技術 看影片追技術 看更多
熱門tag 看更多
15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽 鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# windows server linux css react vue.js
熱門問題
熱門回答
熱門文章
IT邦幫忙